<template>
  <div>
    <a-row>
      <a-col :span="12" v-for="(video, index) in props.listData" :key="video.id" style="margin-bottom: 15px;">
        <a-card hoverable style="width: 93%;">
          <template #cover>
            <template v-if="video.videoFileId">
              <div class="video-player">
                <video style="width: 100%; height: 170px;" ref="videoPlayer"
                  :src="`/dev-api/ufs/preview/${video.videoFileId}`" controls></video>
              </div>
            </template>
          </template>
          <template #actions>
            <edit-outlined key="edit" @click="editItem(video)" />
            <delete-outlined key="delete" @click="deleteItem(video)" />
          </template>
          <a-card-meta :title="`${video.videoToolName}——${video.videoType}`" :description="video.videoType" />
        </a-card>
      </a-col>
      <a-empty v-if="(props.listData == undefined) || (props.listData.length == 0)" style="width: 100%;" />
    </a-row>

    <!-- 编辑弹窗 -->
    <AntdConfirmModal title="更新信息" ref="modalRef" width="700px" :keepSlot="false" @confirm="submitForm">
      <a-form :model="form" name="basic" :label-col="{ span: 10 }">
        <a-row>
          <a-col :pull="4" :span="20">
            <a-form-item label="视频类别" name="videoType" :rules="[{ required: true, message: '请选择视频类型' }]">
              <a-select v-model:value="form.videoType" style="width: 400px;" allowClear>
                <a-select-option v-for="item of videoType" :value="item" :key="item">
                  {{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :pull="4" :span="20">
            <a-form-item label="视频工具名" name="videoToolName">
              <a-input v-model:value="props.toolType" style="width: 400px;" placeholder="请输入视频所演示的工具" :disabled="true" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </AntdConfirmModal>
  </div>
</template>
<script setup>
import { EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { queryList, deleteOne, updateOne, createOne } from "@/api/salvage/video";
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const props = defineProps({
  toolType: {
    type: String,
  },
  fileType: {
    type: String,
  },
  listData: {
    type: Array,
  }
});
const videoData = ref([])
const total = ref(1)
const form = ref({});
const videoPlayer = ref(null);
const videoType = ref(['工具组装', '模拟打捞', '工具介绍']);
const emit = defineEmits(["getVideoList"]);

watch(() => props.toolType, () => {
  emit("getVideoList", props.fileType);
});
emit("getVideoList", props.fileType);
console.log('111', props.listData, props.listData === undefined);
// 删除
function deleteItem(e) {
  deleteOne(e.id).then((res) => {
    $.showToast({
      title: "删除成功",
      icon: "success",
    });
    emit("getVideoList", props.fileType);
  });
};

//编辑
function editItem(e) {
  form.value = e;
  modalRef.value.openModal();
}

// 编辑提交
function submitForm() {
  updateOne(form.value).then((res) => {
    $.showToast({
      title: "修改成功",
      icon: "success",
    });
    emit("getVideoList", props.fileType);
  });
  modalRef.value.closeModal()
}
</script>